//引入路由组件
// import Home from '@/pages/Home/Home.vue';
import Search from '@/pages/Search/Search.vue';
import Login from '@/pages/Login/Login.vue';
import Register from '@/pages/Register/Register.vue';
import Deteil from '@/pages/Detail/Detail.vue';
import AddCartSuccess from '@/pages/AddCartSuccess/AddCartSuccess.vue';
import ShopCart from '@/pages/ShopCart/ShopCart.vue';
import Trade from "@/pages/Trade/Trade.vue";
import Pay from "@/pages/Pay/Pay.vue";
import PaySuccess from '@/pages/PaySuccess/PaySuccess.vue';
import Center from '@/pages/Center/Center.vue'
//二级路由组件
import MyOrder from '@/pages/Center/MyOrder/myOrder.vue';
import GroupOrder from '@/pages/Center/GroupOrder/groupOrder.vue'

/**
 * 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。
 * 如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。
 */
//配置路由信息
export default [
    //路径前面要有/
    //路径单词小写
    {
        name: 'home',
        path: '/home',
        component: () => import('@/pages/Home/Home.vue'),//路由懒加载
        meta: { show: true }
    },
    {
        name: 'search',
        path: '/search/:keyword?',
        component: Search,
        meta: { show: true },
        // 路由组件能不能传递props数据？
        // 布尔值写法:params
        // props: true,
        //对象写法:额外的给路由组件传递一些props
        // props: { a: 1, b: 2 },
        //函数写法：可以传递params参数，query参数,通过props传递给路由组件
        // props: ($route) => ({ keyword: $route.params.keyword, big: $route.query.k })
    },
    {
        path: '/login',
        component: Login,
    },
    {
        path: '/register',
        component: Register,
    },
    //Detail组件
    {
        path: '/detail/:skuid',
        component: Deteil,
    },
    //
    {
        name: 'addcartsuccess',
        path: '/addcartsuccess',
        component: AddCartSuccess,
        meta: { show: true }
    },
    {
        name: 'shopcart',
        path: '/shopcart',
        component: ShopCart,
    },
    {
        name: 'trade',
        path: '/trade',
        component: Trade,
        meta: { show: true },
        //路由独享守卫
        beforeEnter: (to, from, next) => {
            //只有从购物车才能去交易页面
            if (from.path == '/shopcart' || from.path == '/') {
                next();
            } else {
                next(from.path)
            }
        }
    },
    {
        name: 'pay',
        path: '/pay',
        component: Pay,
        meta: { show: true },
        beforeEnter: (to, from, next) => {
            //只有从交易页面才能去支付
            if (from.path == '/trade' || from.path == '/') {
                next();
            } else {
                //从其他地方来 停留当前
                next(false)
            }
        }
    },
    {
        path: '/paysuccess',
        meta: { show: true },
        component: PaySuccess,
    },
    {
        path: '/center',
        component: Center,
        //二级路由组件
        children: [
            {
                path: 'myorder',
                component: MyOrder
            },
            {
                path: 'grouporder',
                component: GroupOrder,
            },
            {
                path: '/center',
                redirect: '/center/myorder'
            }
        ]
    },
    //重定向，在项目跑起来的时候，访问/,立马定向到首页
    {
        path: '*',
        redirect: '/home'
    },

]